<template>
  <main class="pug-pro-basicLayout-content pug-pro-basicLayout-has-header">
    <div class="pug-pro-page-container">
      <div class="pug-pro-page-container-warp">
        <div class="pug-page-header has-breadcrumb">
          <div class="pug-page-header-heading">
            <div class="pug-page-header-heading-left">
              <span class="pug-page-header-heading-title" title="分步表单">{{ opid ? '修改文章' : "添加文章" }}</span>
              {{ opid ? '编辑的id是:' : "" }}{{ opid }}
            </div>
          </div>
          <div class="pug-page-header-content">
            <div class="pug-pro-page-container-detail">
              <div class="pug-pro-page-container-main">
                <div class="pug-pro-page-container-row">
                  <div class="pug-pro-page-container-content">
                    文章添加页用于管理员发布文章，可不用审核直接发布。
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="pug-pro-grid-content">
        <div class="pug-pro-grid-content-children">
          <div class="pug-pro-layout-watermark-wrapper" style="position: relative;">
            <div class="pug-pro-page-container-children-content">
              <div class="pug-card">
                <div class="pug-pro-steps-form-steps-container" style="max-width: 760px;padding: 20px 0">
                  <div class="pug-steps pug-steps-horizontal pug-steps-label-horizontal">
                    <div class="pug-steps-item" @click="next(1)"
                         :class="[currentStep>=1?'pug-steps-item-process pug-steps-item-active':'']">
                      <div class="pug-steps-item-container">
                        <div class="pug-steps-item-tail"></div>
                        <div class="pug-steps-item-icon"><span class="pug-steps-icon">1</span></div>
                        <div class="pug-steps-item-content">
                          <div class="pug-steps-item-title">基本信息</div>
                        </div>
                      </div>
                    </div>
                    <div class="pug-steps-item pug-steps-item-wait" @click="next(2)"
                         :class="[currentStep>=2?'pug-steps-item-process pug-steps-item-active':'']">
                      <div class="pug-steps-item-container">
                        <div class="pug-steps-item-tail"></div>
                        <div class="pug-steps-item-icon"><span class="pug-steps-icon">2</span></div>
                        <div class="pug-steps-item-content">
                          <div class="pug-steps-item-title">详细内容</div>
                        </div>
                      </div>
                    </div>
                    <div class="pug-steps-item pug-steps-item-wait" @click="next(3)"
                         :class="[currentStep>=3?'pug-steps-item-process pug-steps-item-active':'']">
                      <div class="pug-steps-item-container">
                        <div class="pug-steps-item-tail"></div>
                        <div class="pug-steps-item-icon"><span class="pug-steps-icon">3</span></div>
                        <div class="pug-steps-item-content">
                          <div class="pug-steps-item-title">文章预览</div>
                        </div>
                      </div>
                    </div>

                  </div>
                </div>
              </div>
              <div v-show="currentStep==1" class="pug-card mt20" v-if="shuju">
                <div class="pug-card-body">
<!--                  <div class="pug-debug-result">{{article}}</div>-->

                  <div class="pug-row" style="justify-content: center">

                    <div class="pug-col pug-col-lg-8" style="padding:0 30px;">
                      <div autocomplete="off" class="pug-form pug-form-vertical pug-form-hide-required-mark">
                        <input type="hidden" v-model="article.id" cref="id"/>
                        <div class="pug-row pug-form-item" style="row-gap: 0px;">
                          <div class="pug-col pug-form-item-label">
                            <label class="pug-form-item-required" title="文章标题">文章标题
                              <span class='pug-valid-label'>(*必填)</span>
                            </label>
                          </div>
                          <div class="pug-col pug-form-item-control">
                            <div class="pug-form-item-control-input">
                              <div class="pug-form-item-control-input-content">
                                <pug-input  placeholder="请输入文章标题" cref="name" maxlen="128"  v-model="article.name" type="text"></pug-input>
                              </div>
                            </div>
                          </div>
                        </div>

                        <div class="pug-row pug-form-item" style="row-gap: 0px;">
                          <div class="pug-col pug-form-item-label">
                            <label class="pug-form-item-required" title="分类">分类
                              <span class='pug-valid-label'>(*必选)</span>
                            </label>
                          </div>
                          <div class="pug-col pug-form-item-control">
                            <div class="pug-form-item-control-input">
                              <div class="pug-form-item-control-input-content">
                                <pug-select showtext="请选择分类" cref="categoryId" :items="citems" v-model="article.categoryId"></pug-select>
                              </div>
                            </div>
                          </div>
                        </div>

                        <div class="pug-row pug-form-item" style="row-gap: 0px;">
                          <div class="pug-col pug-form-item-label">
                            <label class="pug-form-item-required" title="发布状态 1发布中 0未发布">发布状态
                            </label>
                          </div>
                          <div class="pug-col pug-form-item-control">
                            <div class="pug-form-item-control-input">
                              <div class="pug-form-item-control-input-content">
                                <pug-radio v-model="article.status" cref="status" :items='[{text:"是",value:1},{text:"否",value:0}]' :is-value="false"></pug-radio>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="pug-row pug-form-item" style="row-gap: 0px;">
                          <div class="pug-col pug-form-item-label">
                            <label class="pug-form-item-required" title="删除状态 0未删除 1删除">删除状态
                            </label>
                          </div>
                          <div class="pug-col pug-form-item-control">
                            <div class="pug-form-item-control-input">
                              <div class="pug-form-item-control-input-content">
                                <pug-radio v-model="article.isdelete" cref="isdelete" :items='[{text:"不删除",value:0},{text:"删除",value:1}]' :is-value="false"></pug-radio>
                              </div>
                            </div>
                          </div>
                        </div>
                        <!--保存和下一步按钮-->
                        <div class="pug-space pug-space-horizontal pug-space-align-center"
                             style="flex-wrap: wrap; gap: 8px;">
                          <div class="pug-space-item" style="">
                            <router-link to="/article"><button  class="pug-btn pug-btn-primary mr10"><span><i class="iconfont icon-icon_arrow_left pr3 fz13"></i>返回</span></button></router-link>
<!--                            <button type="button" v-if="!article.id" class="pug-btn pug-btn-primary mr3" @click="getCategoryName()" style="padding-top: 0px"><span><i class="iconfont icon-tianjia pr3"></i>保存</span></button>-->
<!--                            <button type="button" v-if="article.id" class="pug-btn pug-btn-primary mr3" @click="saveorupdate()" style="padding-top: 0px"><span><i class="iconfont icon-quanbudingdan pr3"></i>编辑</span></button>-->
                          </div>
                          <div class="pug-space-item" style="">
                            <button type="button" class="pug-btn" @click="next(2)"><span>下一步</span></button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div v-show="currentStep==2" class="pug-card mt20" v-if="shuju">
                <div class="pug-card-body">
<!--                  <div class="pug-debug-result">{{article}}</div>-->

                  <div class="pug-row" style="justify-content: center">

                    <div class="pug-col" style="padding:0 30px;">
                      <div autocomplete="off" class="pug-form pug-form-vertical pug-form-hide-required-mark">
                        <input type="hidden" v-model="article.id" cref="id"/>

                        <div class="pug-row pug-form-item" style="row-gap: 0px; width: 914px">
                          <div class="pug-col pug-form-item-label">
                            <label class="pug-form-item-required" title="内容">内容
                              <span class='pug-valid-label'>(*必填)</span>
                            </label>
                          </div>
                          <div class="pug-col pug-form-item-control">
                            <div class="pug-form-item-control-input">
                              <div class="pug-form-item-control-input-content">
                                <pug-editor :cheight="600" :placeholder="article.content" target="content" v-model="article.content"></pug-editor>
                              </div>
                            </div>
                          </div>
                        </div>

                        <!--保存和下一步按钮-->
                        <div class="pug-space pug-space-horizontal pug-space-align-center"
                             style="flex-wrap: wrap; gap: 8px;width: 900px;justify-content: center;">
                          <div class="pug-space-item" style="">
                            <button  class="pug-btn mr10" @click="prev(1)"><span>上一步</span></button>
<!--                            <button type="button" v-if="!article.id" class="pug-btn pug-btn-primary mr3" @click="getCategoryName()" style="padding-top: 0px"><span><i class="iconfont icon-tianjia pr3"></i>保存</span></button>-->
<!--                            <button type="button" v-if="article.id" class="pug-btn pug-btn-primary mr3" @click="saveorupdate()" style="padding-top: 0px"><span><i class="iconfont icon-quanbudingdan pr3"></i>编辑</span></button>-->
                          </div>
                          <div class="pug-space-item" style="">
                            <button type="button" class="pug-btn" @click="next(3)"><span>下一步</span></button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div v-show="currentStep==3" class="pug-card mt20">
                <div class="pug-card-body">
<!--                  <div class="pug-debug-result">{{article}}</div>-->
<!--                  <div class="pug-debug-result">{{citems}}</div>-->
                  <div class="pug-row" style="justify-content: center">

                    <div class="pug-col" style="padding:0 30px; width: 1200px; justify-content: left">
                      <div autocomplete="off" class="pug-form pug-form-vertical pug-form-hide-required-mark">
                        <input type="hidden" v-model="article.id" cref="id"/>

                        <div v-html="article.content"  style="padding: 20px 30px 20px 30px;word-wrap: break-word;"></div>

                        <!--保存和下一步按钮-->
                        <div class="pug-space pug-space-horizontal pug-space-align-center"
                             style="flex-wrap: wrap; gap: 8px;justify-content: center;width: 1111px">
                          <div class="pug-space-item" style="">
                            <button  class="pug-btn mr10" @click="prev(2)"><span>上一步</span></button>
                             </div>
                          <div class="pug-space-item" style="">
<!--                            <button type="button" class="pug-btn" @click="next(2)"><span>下一步</span></button>-->
                            <button type="button" v-if="!article.id" class="pug-btn pug-btn-primary mr3" @click="saveorupdate()" style="padding-top: 0px"><span><i class="iconfont icon-tianjia pr3"></i>保存</span></button>
                            <button type="button" v-if="article.id" class="pug-btn pug-btn-primary mr3" @click="saveorupdate()" style="padding-top: 0px"><span><i class="iconfont icon-quanbudingdan pr3"></i>编辑</span></button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

              </div>

            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
</template>
<script>
import categoryService from '@/services/articlecategory'
import cache from "@/utils/cache";
import {getById, isEmpty, isNotEmpty} from "@/utils/validate";
import pugMessage from "@/plugins/PugMessage";
import pugDialog from "@/plugins/PugDialog";
import articleService from "@/services/article";
export default {
  name: "sortform",
  components: {
  },
  data() {
    return {
      citems: [{text:"请选择",value:""}],
      opid: "",

      article:{
        id:"", // 主键
        name:"", // 文章标题
        content:"请输入正文内容...",//文章内容
        categoryId:"",//文章分类id
        categoryName:"",//文章分类
        status:1 , // 发布状态 1发布中 0未发布
        isdelete:0  // 删除状态 0未删除 1删除
      },

      currentStep: 1,
      steps: [1, 2, 3],
      shuju:false,
    }
  },

  created() {
    this.loadCategoires();
    if(!isEmpty(this.$route.params.id)){
      this.article.id = this.$route.params.id;
      this.opid = this.$route.params.id;
      // 加载明细
      this.getDetail();
    }else{
      if(isNotEmpty(cache.local.get("article_save"))) {
        this.article = cache.local.getJSON("article_save")
        this.shuju = true
      }else {
        this.shuju = true
      }
    }
    //this.opid = this.$route.params.id;
    if(!this.opid){
      this.article.id=this.opid
    }
  },
  watch:{
    article:{
      deep:true,
      handler(val){
        cache.local.setJSON("article_save",val);
      }
    }
  },

  methods: {
    // 加载明细
    async getDetail(){
      try{
        const res = await  articleService.getArticle(this.opid);
        this.article = res.data;
        this.$forceUpdate();
      }catch (err) {
        pugMessage.error("服务器异常,代号：1025");
      }
      this.shuju = true
    },
    //保存
    async saveorupdate(){
      try {

        // 校验
        const vresult = await this.validator();
        if (!vresult) {
          return;
        }

        this.getCategoryName()

        pugDialog.confirm('提示',"你确定进行【"+(this.article.id?'更新':'保存')+"】吗？").then(async ()=>{
          // 执行服务器数据保存角色管理
          const res = await  articleService.saveUpdateArticle(this.article);
          if(res.status == 200){
            if(isEmpty(this.article.id)){
              // 重置数据
              this.reset();
              cache.local.remove("article_save");
              // 返回列表
              pugMessage.success("添加成功");
              this.$router.push("/article/list");
            }else{
              cache.local.remove("article_save");
              // 返回列表
              pugMessage.success("修改成功");
              this.$router.push("/article/list");
            }
          }
        })
      }catch(err){
        pugMessage.error("服务器异常,代号：1025");
      }

    },
    // 加载分类
    loadCategoires() {
      categoryService.findArticleCategories().then(res => {
        var items = res.data;
        this.citems = this.citems.concat(items.map(item=>({text:item.name,value:item.id})));
        //this.citems = items.map(item=>({text:item.name,value:item.id}));
      })
    },
    //根据分类id获取分类名称
    getCategoryName(){
      var items =  this.citems
      var category =this.article
      for(var i=0; items.length;i++){
        if( category.categoryId == items[i].value){
          category.categoryName = items[i].text
          return true;
        }
      }
    },

    // 2: 校验
    async validator(){

      if(isEmpty(this.article.name)){
        pugMessage.error("请输入文章标题");
        getById('name').focus();
        return false;
      }

      if(isEmpty(this.article.categoryId)){
        pugMessage.error("请选择分类");
        getById('categoryId').focus();
        return false;
      }

      if(isEmpty(this.article.status)){
        pugMessage.error("请输入发布状态 1发布中 0未发布");
        getById('status').focus();
        return false;
      }

      if(isEmpty(this.article.isdelete)){
        pugMessage.error("请输入删除状态 0未删除 1删除");
        getById('isdelete').focus();
        return false;
      }

      return true;
    },

    prev(index) {
      this.currentStep = index;
    },

    next(index) {
      this.currentStep = index;
    },

    uploadSuccess(response) {
      console.log("uploadSuccess:", response)
    },


    // 5: 重置数据
    reset(){
      this.article = {
        id:"", // 主键
        name:"", // 文章标题
        content:"",//文章内容
        categoryId:"",//文章分类id
        categoryName:"",//文章分类
        status:1 , // 发布状态 1发布中 0未发布
        isdelete:0  // 删除状态 0未删除 1删除
      }
    },
  }
}
</script>
<style scoped="">

</style>
